<template>
	<view class="public-loading" :style="css">
		<view class="loader">
			<view class="bar1"></view>
			<view class="bar2"></view>
			<view class="bar3"></view>
			<view class="bar4"></view>
			<view class="bar5"></view>
			<view class="bar6"></view>
			<view class="bar7"></view>
			<view class="bar8"></view>
			<view class="bar9"></view>
			<view class="bar10"></view>
			<view class="bar11"></view>
			<view class="bar12"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "global-loading",
		props: {
			css: {
				type: String,
				default: "padding:25rpx 0;"
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.public-loading {
		display: flex;
		align-items: center;
		justify-content: center;

		.loader {
			position: relative;
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
		}

		.loader view {
			width: 7%;
			height: 24%;
			background: rgb(128, 128, 128);
			position: absolute;
			left: 50%;
			top: 30%;
			opacity: 0;
			border-radius: 50rpx;
			box-shadow: 0 0 3rpx rgba(0, 0, 0, 0.2);
			animation: fade458 1s linear infinite;
		}

		@keyframes fade458 {
			from {
				opacity: 1;
			}

			to {
				opacity: 0.25;
			}
		}

		.loader .bar1 {
			transform: rotate(0deg) translate(0, -130%);
			animation-delay: 0s;
		}

		.loader .bar2 {
			transform: rotate(30deg) translate(0, -130%);
			animation-delay: -1.1s;
		}

		.loader .bar3 {
			transform: rotate(60deg) translate(0, -130%);
			animation-delay: -1s;
		}

		.loader .bar4 {
			transform: rotate(90deg) translate(0, -130%);
			animation-delay: -0.9s;
		}

		.loader .bar5 {
			transform: rotate(120deg) translate(0, -130%);
			animation-delay: -0.8s;
		}

		.loader .bar6 {
			transform: rotate(150deg) translate(0, -130%);
			animation-delay: -0.7s;
		}

		.loader .bar7 {
			transform: rotate(180deg) translate(0, -130%);
			animation-delay: -0.6s;
		}

		.loader .bar8 {
			transform: rotate(210deg) translate(0, -130%);
			animation-delay: -0.5s;
		}

		.loader .bar9 {
			transform: rotate(240deg) translate(0, -130%);
			animation-delay: -0.4s;
		}

		.loader .bar10 {
			transform: rotate(270deg) translate(0, -130%);
			animation-delay: -0.3s;
		}

		.loader .bar11 {
			transform: rotate(300deg) translate(0, -130%);
			animation-delay: -0.2s;
		}

		.loader .bar12 {
			transform: rotate(330deg) translate(0, -130%);
			animation-delay: -0.1s;
		}
	}
</style>